<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>姓名案例插值</title>
    <style>
        .basic{
            border: 1px solid red;
        }
        .happy{
            font-size: 30px;
            color: blue;
        }
        .sad{
            font-size: 15px;
            color: green;
        }
        .normal{
            font-size: 20px;
            color: black;
        }
    </style>
    <!-- 引入 Vue 2 的 CDN 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
   <!-- 动态改变样式 -->
    <div id="app">
        <!--                绑定class样式<字符串>,样式的类名不确定，需要动态指定 -->
        <div class="basic" :class="mood" @click="changeMood">{{name}}</div><br/>
        <!--                绑定class样式<数组>,样式的样式个数，名字不确定，需要动态指定,数组形式-->
        <div class="basic" :class="arr" @click="changeMood2">{{name}}</div><br/>
        <!--                绑定class样式<对象>,样式的样式个数，名字确定，动态决定,对象形式-->
        <div class="basic" :class="classObj" @click="changeMood3">{{name}}</div><br/>
        <!--                绑定style样式<对象>,样式的样式个数，名字确定，动态决定,对象形式-->
        <div class="basic" :style="styleObj" @click="changeMood4"> {{name}}</div><br/>
        <!--                绑定style样式<数组>,需要动态指定,数组形式-->
        <div class="basic" :style="styleArr" @click="changeMood5"> {{name}}</div><br/>

    </div>

    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                name: '张test',
                mood:'happy',
                arr:['happy','normal','sad'],
                classObj:{
                    happy:true,
                    normal:false,
                    sad:false
                },
                styleObj:{
                    color:'red',
                    fontSize:'45px',
                    border:'2px solid blue',
                },
                styleObj2:{
                    color:'green',
                    fontSize:'20px',
                    border:'2px solid black',
                    backgroundColor:'yellow'
                },
                styleArr: [ 
                    { color: 'red', fontSize: '45px', border: '2px solid blue' },
                    { color: 'green',  border: '2px solid black', backgroundColor: 'yellow' }
                ]
            },
            methods: {
                changeMood() {
                    const moods=['happy','normal','sad']
                    const index = Math.floor(Math.random()*3)
                    this.mood =moods[index]
                },
                changeMood2() {
                    const moods=['happy','normal','sad']
                    const index = Math.floor(Math.random()*3)
                    this.arr=[moods[index],'basic']
                },
                changeMood3() {
                    this.classObj={
                        happy:false,
                        normal:false,
                        sad:false
                    }
                },
                changeMood4(){
                    this.styleObj={
                        color:'green',
                        fontSize:'20px',
                        border:'2px solid black',
                        backgroundColor:'yellow'
                    }
                }
            }
        })
        ;
    </script>

</body>
</html> 